<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pop</title>
    <style>
        #popContainer{
            position: relative;
            background-color: rgba(red, green, blue, .5)
        }
    </style>
</head>

<body>
    <div id="popContainer"></div>
    <script>
        var json = [{
                name: '和平型',
                value: 10
            },
            {
                name: '助人型',
                value: 30
            },
            {
                name: '多血型',
                value: 150
            },
            {
                name: '胆汁型',
                value: 130
            },
            {
                name: '粘液型',
                value: 100
            },
            {
                name: '抑郁质',
                value: 90
            },
            {
                name: '成熟型',
                value: 50
            },
            {
                name: '成熟型2',
                value: 50
            },
            {
                name: '成熟型3',
                value: 50
            },
            {
                name: '成熟型4',
                value: 50
            },
            {
                name: '成熟型5',
                value: 20
            },
            {
                name: '成熟型6',
                value: 10
            },
            {
                name: '成熟型7',
                value: 10
            },
            {
                name: '成熟型8',
                value: 10
            },
            {
                name: '成熟型9',
                value: 10
            },
            {
                name: '成熟型10',
                value: 10
            },
        ]
        
        function Pop(width, height, dom, maxValue ,json) {
            this.width = width;
            this.height = height;
            this.json=json;
            this.dom = document.querySelector(dom);
            this.maxValue = maxValue||100;

            this.maxPercent =0.5; 
            this.rootFontSize = 18;

            this.coefficient = this.maxPercent / this.maxValue;
        }

        Pop.prototype.init = function () {
            this.initPopContainer();
            for(var i =0;i<this.json.length;i++){
                this.creatPop(this.json[i].name,this.json[i].value);
            }
        }

        Pop.prototype.initPopContainer = function(){
            this.dom.style.width=this.width+"px";
            this.dom.style.height=this.height+"px";
            this.dom.style.overflow="hidden";
            this.dom.style.fontSize=this.rootFontSize+"px";
        }

        Pop.prototype.decodeStyle = function(dom,data){
            for(var i in data){
                dom.style[i] = data[i];
            }
            return dom;
        }

        Pop.prototype.creatPop = function(name,value){
            var self = this;
            setTimeout(function(){
                var pop = document.createElement("div");
                var random = self.random();
                var top = random.top;
                var left = random.left;
                var style = {
                    "cursor":"pointer",
                    "borderRadius":"100%",
                    "position":"absolute",
                    "textAlign":"center",
                    "display":"flex",
                    "justifyContent":"center",
                    "alignItems":"center",
                    "backgroundColor":self.randomColor(),
                    "width":value * self.coefficient*100+"%",
                    "height":value * self.coefficient*100+"%",
                    "top":top+"px",
                    "left":left+"px",
                    "fontSize": value/self.maxValue*self.rootFontSize+"px"
                }
                var span = document.createElement("span");
                span.innerHTML = name;
                span.style.color="white";
                span.style.fontSize="1em";
                pop.appendChild(span);
                var newPop = self.decodeStyle(pop,style);
                self.dom.appendChild(newPop);
            },50);
        }
        Pop.prototype.random = function(){
            var self = this;
            var top = parseInt(Math.random()*(self.width*1));
            var left = parseInt(Math.random()*(self.height*1));
            return {
                top:top,
                left:left
            }
        }
        Pop.prototype.randomColor = function(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var alpha = (Math.random()*0.5)+0.5;
            var rgba = "rgba("+r+","+g+","+b+","+alpha+")";
            return rgba;
        }

        var pop=new Pop(1000,1000,"#popContainer",150,json);
        pop.init();
    </script>
</body>

</html>